<template>
  <div class="tabs-container">
    <template v-for="(item, i) in props.tabs" :key="i">
      <p :class="`tab-item ${item.isActive ? 'activeTab' : null}`" @click="changeType(item)">
        {{ item.name }}
      </p>
    </template>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
const props = defineProps({
  tabs: {
    type: Array as PropType<{ name: string; isActive: boolean; }[]>,
    defalut: () => []
  }
})
const emit = defineEmits(['change'])
const changeType = (val: { name: string; isActive: boolean; }) => {
  emit('change', val)
}
</script>

<style lang="scss" scoped>
  .tabs-container {
    display: inline-block;
    height: 46px;
    line-height: 46px;
    border: 1px solid #d8dbe8;
    border-radius: 9px;
    padding: 0 8px;

    .tab-item {
      display: inline-block;
      padding: 0 16px;
      cursor: pointer;
      font-size: 14px;
      font-family: 'Microsoft YaHei', 'Microsoft YaHei-Regular';
      font-weight: 400;
      color: #212427;
    }

    .activeTab {
      height: 32px;
      line-height: 32px;
      color: #fff;
      background: $primary;
      border-radius: 4px;
    }
  }
</style>
